<template>
    <div class="public_main_style">
        <div class="public_main_head">
            <el-form :model="filters" inline label-width="100px" @submit.native.prevent>
                <el-row type="flex" align="middle">
                    <el-col :span="8">
                        <el-form-item label="手机号:">
                            <el-input
                                    size="small"
                                    v-model="filters.mobile"
                                    placeholder="请输入用户手机号"
                                    clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="推荐人手机号:">
                            <el-input
                                    size="small"
                                    v-model="filters.recommenderPhone"
                                    placeholder="请输入推荐人手机号"
                                    clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="用户标签:">
                            <el-select
                                    size="small"
                                    clearable
                                    v-model="filters.userLabelTag"
                                    placeholder="请选择用户标签"
                            >
                                <el-option
                                        v-for="dict in dictArrs.user_label"
                                        :key="dict.dictId"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" align="middle">
                    <el-col :span="8">
                        <el-form-item label="用户状态:">
                            <el-select
                                    size="small"
                                    clearable
                                    v-model="filters.status"
                                    placeholder="请选择用户状态"
                            >
                                <el-option label="启用" value="0"></el-option>
                                <el-option label="禁用" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="邀请码:">
                            <el-input
                                    size="small"
                                    v-model="filters.invitation"
                                    placeholder="请输入用户邀请码"
                                    clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="用户等级:">
                            <el-select
                                    size="small"
                                    clearable
                                    v-model="filters.lvType"
                                    placeholder="请选择用户等级"
                            >
                                <el-option
                                        v-for="dict in dictArrs.lv_type"
                                        :key="dict.dictId"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" align="middle" justify="center">
                    <el-col :span="3">
                        <el-form-item>
                            <el-button
                                    style="width:100%;"
                                    type="primary"
                                    size="small"
                                    @click="updataTableList(1)"
                                    icon="el-icon-search"
                            >搜索
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- ETable -->
        <ETable ref="table" :columns="tableHead" :getData="getTableData" @selectionChage="onSelectTableRow">
            <template slot="head">
                <el-button size="mini" type="primary" @click="onShowModal('userModal')">修改用户</el-button>
                <el-button size="mini" type="danger" @click="resetPwd">重置密码</el-button>
            </template>
            <template slot="userStatus" slot-scope="{ row }">
                <el-tag
                        size="small"
                        :type="row.status == '1' ? 'danger' : 'primary'"
                >{{ row.status | userStatus }}
                </el-tag>
            </template>
        </ETable>
        <!-- 修改用户弹框 -->
        <userModal ref="userModal" :userId="userId" />
    </div>
</template>

<script>
    import {  _rechangePwd, _getUserList } from '_api'
    import userModal from './components/userModal'
    import vueState from '@lib/vuexState'

    export default {
        mixins: [vueState],

        data() {
            return {
                selectTableRow: [],
                userId: '',
                filters: {
                    mobile: '',
                    recommenderPhone: '',
                    userLabelTag: '',
                    status: '',
                    invitation: '',
                    lvType: ''
                },
                tableHead: [
                    {
                        type: 'selection'
                    },
                    {
                        prop: 'userId',
                        label: 'ID',
                    },
                    {
                        prop: 'userName',
                        label: '昵称',
                    },
                    {
                        prop: 'mobile',
                        label: '手机',
                    },
                    {
                        prop: 'vip',
                        label: 'VIP',
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        slotName: 'userStatus',
                    }
                ]
            }
        },
        components: {
            userModal
        },
        created() {
            this.$store.dispatch('getDictlists', 'account_trend_type')
        },
        methods: {
            //获取列表数据
            async getTableData(arg) {
                return (await _getUserList({...arg, ...this.filters}))
            },
            // 选择表格数据
            onSelectTableRow (row) {
                this.selectTableRow = row
            },
            // 操作表格行数据
            onShowModal (type) {
                if (this.selectTableRow.length == 1) {
                    this.userId = this.selectTableRow[0].userId
                    this.$refs[type].showModal = true
                } else {
                    this.userId = ''
                    this.$message.error('请选择一行数据进行操作!')
                }
            },
            // 重置账号密码
            resetPwd() {
                if (this.selectTableRow.length == 1) {
                    let userId = this.selectTableRow[0].userId
                    this.$confirm('确定要重置该用户密码吗？(重置密码为用户用户手机号!)', '重置密码', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        closeOnClickModal: false,
                    }).then( () => {
                        this.$refs.table.loading = true
                        _rechangePwd(userId).then(res => {
                            this.updataTableList()
                            this.$message.success(res.msg)
                        }).catch(() => {
                            this.$refs.table.loading = false
                        })
                    })
                } else {
                    this.$message.error('请选择一行数据进行操作!')
                }
            },
            //更新列表数据
            updataTableList(pageIndex) {
                this.$refs.table.updateTable(pageIndex)
            }
        }
    }
</script>

<style lang="less" scoped>
    .public_main_head {
        padding: 10px;
    }
</style>
